<!--  -->
<template>
  <div class="order-list">
      <HeaderTop title="优惠券"></HeaderTop>
      <div class="order-container">
        <div class="order-search">
          <el-button class="order-add" icon="el-icon-plus" @click="modal1=true">添加优惠券</el-button>
          <Modal v-model="modal1" width="420" height="386" :mask-closable="false" :styles="{top:'230px',left:'180px'}">
            <p slot="header" style="width:420px;height:62px;line-height:62px;font-size:18px;background:rgb(250,250,250);padding:0;border-bottom:1px solid #E0E0E0">
              <span>添加优惠券</span>
            </p>
            <el-form ref="form" :model="form" label-width="80px" class="form">
              <el-form-item label="减满金额">
                <el-input style="width:90px" v-model="form.minConsume"></el-input>
              </el-form-item>
              <el-form-item label="优惠金额">
                <el-input style="width:90px" v-model="form.deductionMoney"></el-input>
              </el-form-item>
              <el-form-item label="失效时间">
                <el-date-picker v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="默认状态">
                <el-select style="width:90px" v-model="form.status" placeholder="选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <!-- <p style="color:#CACACA;font-size:12px">防止操作错误，状态修改请确认添加以后修改</p> -->
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addCoupon">确认</el-button>
              </el-form-item>
            </el-form>
            <div slot="footer">
              <div></div>              
            </div>
          </Modal>
        </div>

        <div class="order-mian">
          <!-- 订单表格 -->
          <el-table max-height="700" class="order-table" :data="couponList" style="width: 100%" :span-method="objectSpanMethod">
            <el-table-column prop="minConsume" label="减满金额"></el-table-column>
            <el-table-column prop="deductionMoney" label="优惠金额"></el-table-column>
            <el-table-column prop="endTime" label="失效时间"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column prop="set" class="order-detail" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="modiCoupon(scope.row)">编辑</el-button>
                <Modal v-model="modal2" width="420" height="386" :mask-closable="false" :styles="{top:'230px',left:'180px'}">
                  <p slot="header" style="width:420px;height:62px;line-height:62px;font-size:18px;background:rgb(250,250,250);padding:0;border-bottom:1px solid #E0E0E0">
                    <span>添加优惠券</span>
                  </p>
                  <el-form ref="form" :model="couponDetail" label-width="80px" class="form">
                    <el-form-item label="减满金额">
                      <el-input style="width:90px" v-model="couponDetail.minConsume" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="优惠金额">
                      <el-input style="width:90px" v-model="couponDetail.deductionMoney" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="失效时间">
                      <el-date-picker v-model="couponDetail.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" disabled></el-date-picker>
                    </el-form-item>
                    <el-form-item label="默认状态">
                      <el-select style="width:90px" v-model="couponDetail.status" placeholder="停用">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">确认</el-button>
                    </el-form-item>
                  </el-form>
                  <div slot="footer">
                    <div></div>              
                  </div>
                </Modal>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="del" label="删除">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="delCoupon(scope.row)">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <!-- 分页 -->
          <div class="block" v-if="couponList.length">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage1"
              layout="total, prev, pager, next, jumper"
              :total="totalSize">
            </el-pagination>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
export default {
  data () {
    return {
      modal1:false,
      modal2:false,
      token:'',
      managerInfoId:'', //用户id
      couponList:[],
      totalSize:null,
      couponDetail:{},
      num:1,
      size:10,
      form: {
          minConsume: '',
          deductionMoney: '',
          endTime: '',
          status: '',
          startTime:'',
          id:'',
        },
      currentPage1: 5,
      options:[
        {
          value: '0',
          label: '停发'
        },
        {
          value: '1',
          label: '发放'
        }
      ],
    };
  },

  components: {
    HeaderTop
  },

  computed: {},
  mounted(){
    this.token = sessionStorage.getItem('token')
    this.managerInfoId = sessionStorage.getItem('userId')
    // console.log(this.token,this.userId)
    this.getCouponList()
  },
  methods: {
    // 查看优惠券列表
    async getCouponList(){
      const params = {
        num: this.num,
        size: this.size,
        managerInfoId:this.managerInfoId,
        token: this.token
      }
      // console.log(params)
      const result = await this.API.reqCouponAll(params)
      console.log('优惠券列表',result.retData)
      if(result.retCode === '000'){
        console.log(result.retData.couponInfos)
        result.retData.couponInfos.forEach(item =>{
          if(item.status === 0){
            item.status = '停发'
          }else{
            item.status = '发放'
          }
        })
        this.couponList = result.retData.couponInfos
        this.totalSize = result.retData.count
        console.log(this.couponList)
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      // 合并单元格逻辑
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.num = val
      this.getCouponList()
    },
    async addCoupon(){
      console.log('增加优惠券1111',this.form)
      const params = {
        token: sessionStorage.getItem('token'),
        minConsume: this.form.minConsume,
        deductionMoney: this.form.deductionMoney,
        endTime:this.form.endTime,
        status: this.form.status,
        managerInfoId:this.managerInfoId,
      }
      console.log('参数',params)
      console.log('发放状态',this.form.status)
      const result = await this.API.reqAddCoupon(params)
      console.log('添加优惠券成功',result)
      if(result.retCode === '000'){
        this.modal1=false
        this.getCouponList()
        this.form.minConsume = ''
        this.form.deductionMoney = ''
        this.form.endTime = ''
        this.form.status = ''
        this.form.startTime = ''
        this.form.id = ''
      }
    },
    modiCoupon(row){
      console.log('点击编辑按钮')
      this.modal2=true
      this.couponDetail = row
      // 获取优惠券信息
      // const params = {
      //   couponInfoId:this.couponDetail.id,
      //   managerInfoId:this.managerInfoId,
      // }
      // const result = await this.API.reqDetailCoupon(params)
    },
    
    async onSubmit(){
      // this.couponDetail.status = this.couponDetail.status === '停发' ? '0' : '1'
      // console.log(this.couponDetail)
      if(this.couponDetail.status === '停发'){
        this.couponDetail.status = '0'
      }
      if(this.couponDetail.status === '发放'){
        this.couponDetail.status = '1'
      }
      const params = {
        token: sessionStorage.getItem('token'),
        minConsume:this.couponDetail.minConsume,
        deductionMoney:this.couponDetail.deductionMoney,
        endTime:this.couponDetail.endTime,
        status:this.couponDetail.status,
        couponInfoId:this.couponDetail.id,
        managerInfoId:this.managerInfoId
      }
      console.log(params)
      // 修改优惠券
      const result = await this.API.reqUpdateCoupon(params)
      console.log('修改优惠券',result)
      this.modal2 = false
      console.log(result)
      this.getCouponList()
    },

    async delCoupon(row){
      console.log('删除的行id',row.id)
      const params = {
        token: sessionStorage.getItem('token'),
        managerInfoId:this.managerInfoId,
        couponInfoId:row.id
      }
      const result = await this.API.reqDelCoupon(params)
      console.log('删除结果',result)
      this.getCouponList()
    }
  }
}

</script>
<style lang='stylus'>
  .ivu-modal-mask
    background rgba(210,210,210,.1)
  .ivu-modal-content
    overflow hidden
    .ivu-modal-header
      padding 0
      border none
      span
        margin-left 10px
        font-weight bold
    .ivu-modal-footer
      border none
</style>

<style lang='stylus' scoped>
.order-list
  height 100%
  .order-container
    height 100%
    .order-search
      height 90px
      display flex
      align-items center
      .order-add
        position absolute
        right 30px
    .order-mian
      position relative
      height 763px
      .order-table
        border-top-left-radius 15px
        border-top-right-radius 15px
        .main
          color red
      .block
        position absolute
        bottom 10px
        margin-left 400px
</style>